<template>
  <div id="main" style="width: 100%; height: 520px; float: left"></div>
</template>

<script>
import * as echarts from "echarts";
import { getreservationCount } from "@/api/login";
// import { getselectRoomBedSum } from "@/api/system/emporty";
export default {
  name: "roseStati",
  data() {
    return {
      myChart: "",
      gaugeData: [
        {
          value: null,
          itemStyle: {
            color: "#2492ff",
          },
          name: "今日预约车辆",
          title: {
            offsetCenter: ["0%", "-30%"],
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ["0%", "-20%"],
          },
        },
        {
          value: null,
          itemStyle: {
            color: "#37d3c2",
          },
          name: "今日实际预约车辆",
          title: {
            offsetCenter: ["0%", "0%"],
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ["0%", "10%"],
          },
        },
        {
          value: null,
          itemStyle: {
            color: "#fec05a",
          },
          name: "取消预约车辆",
          title: {
            offsetCenter: ["0%", "30%"],
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ["0%", "40%"],
          },
        },
      ],
    };
  },
  created() {
     getreservationCount().then((res) => {
      this.gaugeData[0].value = res.data.yy;
      this.gaugeData[2].value = res.data.qx;
      this.gaugeData[1].value = parseInt(res.data.yy-res.data.qx);
      this.$nextTick(() => {
          this.drawLine();
        });
      // this.qdCount = res.data.qd;
      // this.finishedCount = res.data.wc;
      // this.cancalCount = res.data.qx;
      // this.ztCount = Number(
      //   this.dayreservationCount -
      //     this.qdCount -
      //     this.finishedCount -
      //     this.cancalCount
      // );
    });
  },
  mounted() {
    this.selectRoomBedList();
    window.addEventListener("resize", () => {
      if (this.myChart) {
        this.myChart.resize();
      }
    });
  },
  beforeDestroy() {
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
  destroyed() {
    window.removeEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  methods: {
    selectRoomBedList() {
      this.drawLine();
    },
    drawLine() {
      this.myChart = echarts.init(document.getElementById("main"));
      this.myChart.setOption({
        color: ["#5470c6", "#91cc75"],
        // title: {
        //   text: "今日业务预约情况占比",
        //   left: "left",
        //   padding: 15,
        //   textStyle:{
        //     fontSize: 14,
        //   }
        // },
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{a} <br/>{b} : {c} ({d}%)",
        // },
        // legend: {
        //   top: "bottom",
        // },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        // series: [
        //   {
        //     name: "今日业务预约情况占比",
        //     type: "pie",
        //     radius: [50, 150],
        //     center: ["50%", "50%"],
        //     roseType: "area",
        //     itemStyle: {
        //       borderRadius: 8,
        //     },
        //     data: [
        //       { value: 40, name: "rose 1" },
        //       { value: 38, name: "rose 2" },
        //       { value: 32, name: "rose 3" },
        //       { value: 30, name: "rose 4" },
        //       { value: 28, name: "rose 5" },
        //       { value: 26, name: "rose 6" },
        //       { value: 22, name: "rose 7" },
        //       { value: 18, name: "rose 8" },
        //     ],
        //   },
        // ],
        series: [
          {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              // itemStyle: {
              //   borderWidth: 1,
              //   borderColor: "#464646",
              // },
            },
            axisLine: {
              lineStyle: {
                width: 40,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: this.gaugeData,
            title: {
              fontSize: 14,
            },
            detail: {
              width: 50,
              height: 14,
              fontSize: 14,
              color: "inherit",
              borderColor: "inherit",
              borderRadius: 20,
              borderWidth: 1,
              formatter: "{value}辆",
            },
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
</style>
